<template>
  <div class="login_page">
    <div class="header">建筑构件系统管理平台</div>
    <div class="main">
      <div class="login_form">
        <el-form
          :model="ruleForm"
          status-icon
          ref="ruleForm"
          class="demo-ruleForm"
          :rules="rules"
          label-position="top"
        >
          <el-form-item prop="username">
            <el-input
              prefix-icon="el-icon-user"
              v-model.number="ruleForm.username"
              placeholder="请输入用户名称"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              prefix-icon="iconfont icon-mima"
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
              placeholder="请输入登录密码"
            ></el-input>
          </el-form-item>

          <el-form-item prop="validatorNo">
            <el-input
              prefix-icon="iconfont icon-yanzhengma"
              type="number"
              v-model="ruleForm.validatorNo"
              autocomplete="off"
              placeholder="请输入右侧验证码"
            >
              <template slot="append">{{ vdtNo }}</template></el-input
            >
          </el-form-item>
          <el-form-item class="form_item">
            <el-checkbox v-model="isSavePwd" @change="savePwd"
              >记住密码</el-checkbox
            >
            <span class="fgPwd" @click="forgetPwd">忘记密码?</span>
          </el-form-item>
          <el-form-item>
            <el-button
              class="submit_btn"
              type="primary"
              @click="submitForm('ruleForm')"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="footer">
      <p>Copyright © www.bimnb.com, All Rights Reserved.</p>
      <p>平台技术支持：上海拙荆科技发展有限公司</p>
      <p>全过程BIM方案提供商</p>
    </div>
  </div>
</template>
<script>
// import store from '@/store'
import { mapActions } from 'vuex'
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入登录密码'))
      } else {
        callback()
      }
    }
    var validateUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名称'))
      } else {
        callback()
      }
    }
    var validateNo = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入右侧验证码'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        username: localStorage.getItem('username')
          ? localStorage.getItem('username')
          : 'admin',
        password: localStorage.getItem('password')
          ? localStorage.getItem('password')
          : '123456',
        validatorNo: '2567',
      },
      vdtNo: '4568',
      isSavePwd: false,
      rules: {
        username: [{ validator: validateUsername, trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }],
        validatorNo: [{ validator: validateNo, trigger: 'blur' }],
      },
    }
  },
  methods: {
    ...mapActions(['getToken', 'getMyInfo']),
    //  记住密码
    savePwd() {
      if (this.isSavePwd) {
        localStorage.setItem('username', this.ruleForm.username)
        localStorage.setItem('password', this.ruleForm.password)
      }
    },
    // 忘记密码
    forgetPwd() {
      this.$router.push('/userRegister')
    },

    // 登录
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          sessionStorage.setItem('token', '1245dsfsd')
          this.$store.commit('SET_TOKEN', '1245dsfsd')
          this.$message.success('登录成功')
          this.$router.push('/home')
          // this.getToken(this.ruleForm)
        } else {
          this.$message.warning('请检查输入项')
          return false
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.login_page {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #2b4b6b;
  overflow: hidden;
  .header {
    width: 100%;
    height: 100px;
    font-size: 48px;
    line-height: 100px;
    text-align: center;
    padding-top: 50px;
    color: #fff;
    letter-spacing: 5px;
    word-break: keep-all; //只能在半角空格或连字符处换行。
    white-space: nowrap; //文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
  }
  .main {
    .login_form {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      border-radius: 10px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      .el-form {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        ::v-deep .el-form-item__content {
          margin-left: unset !important;
          line-height: unset;
          .submit_btn {
            width: 100%;
            margin: 0 auto;
          }
        }
      }
      .form_item {
        width: 100%;
        ::v-deep .el-form-item__content {
          width: 100%;
          .el-checkbox {
            float: left;
          }
          .fgPwd {
            margin-top: -4px;
            float: right;
            color: #3370ff;
            cursor: pointer;
          }
        }
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 30px;
    left: 50%;
    font-size: 14px;
    transform: translate(-50%, 0);
    text-align: center;
    color: #fff;
  }
}
</style>